<template>
  <!-- 巨能降详情==方案详情组件 -->
  <view class="contents">
    <!-- <u-gap height="24" bg-color="#F6F6F6"></u-gap> -->
    <view class="tostore">
      <view class="titles" @click="stortClick(shoplist)">
        {{ shoplist.store_Name }}
        <u-icon
          style="margin-left: 38rpx"
          name="arrow-right"
          color="#9A9A9A"
          size="24rpx"
        ></u-icon>
      </view>
      <view class="address">
        {{ shoplist.address }}
      </view>
      <view class="yuyuaestop flex flex-ai-c flex-jc-sb">
        <view class="yifuwu flex">
          <view class="iconsss" @click="mobile()">
            <i-icon
              icon="icondianhua"
              type="single"
              size="24rpx"
              color="#3D3D3D"
            ></i-icon>
          </view>
          已服务{{ shoplist.service_Amount }}万人
        </view>
        <view class="jili flex" @click="onClickNavigation()">
          <view class="iconsss">
            <i-icon
              icon="icondaohang"
              type="single"
              size="24rpx"
              color="#3D3D3D"
            ></i-icon>
          </view>
          距你{{ shoplist.distance }}km
        </view>
        <view class="yuyedaod" @click="reservationShop(shoplist)">
          预约到店
        </view>
      </view>
    </view>
    <u-gap height="24" bg-color="#F6F6F6"></u-gap>
    <view class="images">
      <image
        style="height: 354rpx"
        src="https://files.yzsheng.com/client/commodity/duibitu@2x.png"
      ></image>
      <u-gap height="24" bg-color="#F6F6F6"></u-gap>
      <image
        style="height: 406rpx"
        src="https://files.yzsheng.com/client/commodity/gouchebuzou@2x.png"
      ></image>
      <u-gap height="24" bg-color="#F6F6F6"></u-gap>
      <image
        style="height: 670rpx"
        src="https://files.yzsheng.com/client/commodity/gouchexuzhi@2x.png"
      ></image>
    </view>
    <view style="height: 160rpx"></view>
    <view class="quedingbtncolor">
      <view class="flex flex-ai-c flex-jc-sb">
        <view class="flex flex-ai-c">
          <view class="ixonboxs mr-30" @click="kefu()">
            <view class="iconobj">
              <i-icon
                icon="icon54"
                type="single"
                size="38rpx"
                color="#666666"
              ></i-icon>
            </view>
            客服
          </view>
          <view class="ixonboxs mr-30" @click="stortClick(shoplist)">
            <view class="iconobj">
              <i-icon
                icon="icondianpu"
                type="single"
                size="38rpx"
                color="#666666"
              ></i-icon>
            </view>
            店铺
          </view>
          <view
            class="ixonboxs mr-30"
            v-if="collection"
            @click="collectclick()"
          >
            <view class="iconobj">
              <i-icon
                icon="iconwujiaoxing"
                type="single"
                size="38rpx"
                color="#FFE23E"
              ></i-icon>
            </view>
            已收藏
          </view>
          <view class="ixonboxs" v-else @click="collectclick()">
            <view class="iconobj">
              <i-icon
                icon="iconwujiaoxing"
                type="single"
                size="38rpx"
                color="#666666"
              ></i-icon>
            </view>
            收藏
          </view>
        </view>
        <view class="ixonboxs">
          <view class="gouche" @click="reservationShop(carllist.storeDetails)">
            免费到店看车/购车
          </view>
        </view>
      </view>
    </view>
    <!-- 详情弹框-->
    <u-popup v-model="detailBox" mode="bottom" border-radius="30" length="86%">
      <view class="detiboxs">
        <view class="deheads flex flex-ac-c flex-jc-c">
          <view class="deimg">
            <image :src="imgs" mode="aspectFill"></image>
          </view>
          <view class="detitles">
            <view class="dethead">
              {{ carllist.car_Type_Name }} {{ carllist.configuration_Name }}
            </view>
            <view class="debottom">
              厂家指导价：<text>{{ carllist.factory_Prices }}</text>
            </view>
          </view>
          <view class="deion" @click="gbdetaclick">
            <i-icon
              icon="iconguanbi"
              type="single"
              size="38rpx"
              color="#999999"
            ></i-icon>
          </view>
        </view>
        <view style="border-bottom: 1px solid #eeeeee"></view>
        <view class="colorboxs">
          <view class="programme flex flex-ai-c">
            <view class="hkuai"></view>
            <view class="1234"> 选择配色 </view>
          </view>
          <view class="colorsboxs flex">
            <view class="colotext"> 外观 </view>
            <view class="colorlists flex flex-wrap-w">
              <view
                class="flex flex-jc-c flex-ai-c"
                :class="item.chekd ? 'clrboxxzhong' : 'clrbox'"
                v-for="(item, index) in wgColorList"
                :key="index"
                @click="wgcolorClick(item, index)"
              >
                <view
                  class="whitess"
                  :style="{ background: item.colorCoding }"
                ></view>
                <view class="colorname">
                  {{ item.color }}
                </view>
              </view>
            </view>
          </view>
          <view class="colorsboxs flex">
            <view class="colotext"> 内饰 </view>
            <view class="colorlists flex flex-wrap-w">
              <view
                class="flex flex-jc-c flex-ai-c"
                :class="item.chekd ? 'clrboxxzhong' : 'clrbox'"
                v-for="(item, index) in nsColorList"
                :key="index"
                @click="nsColorClick(item, index)"
              >
                <view class="kuang21" v-if="item.neiColor.length == 1">
                  <view
                    class="whitess"
                    :style="{ background: item.neiColor[0] }"
                  ></view>
                </view>
                <view class="kuangdoubu" v-if="item.neiColor.length == 2">
                  <view
                    class="white4"
                    style="border-radius: 10rpx 10rpx 0rpx 0rpx"
                    :style="{ background: item.neiColor[0] }"
                  ></view>
                  <view
                    class="white4"
                    style="border-radius: 0rpx 0rpx 10rpx 10rpx"
                    :style="{ background: item.neiColor[1] }"
                  ></view>
                </view>
                <view class="colorname">
                  {{ item.color }}
                </view>
              </view>
            </view>
          </view>
          <u-gap height="88" bg-color="#ffffff"></u-gap>
          <!-- <view class="btnboxhs">
            确定
          </view> -->
          <view class="btnbox" @click="AddOrder"> 确定 </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    carid: {
      type: String,
      default: "",
    },
    xedColorList: {
      type: Array,
      default: () => [],
    },
    carllist: {
      type: Object,
      default: () => ({}),
    },
  },
  name: "sourceDetailsZj",
  data() {
    return {
      detailBox: false, //详情弹框
      clorList: {
        outerColour: {
          colorCoding: "",
          color: "",
        },
        inColour: {
          colorCoding: "",
          color: "",
          neiColor: [{}],
        },
      }, //选中的颜色
      imgs: "", //图片
      xedColorListS: [], //颜色list-处理过加了check
      shoplist: {}, //店铺信息
      wgColorList: [], //外观颜色list
      nsColorList: [], //内试颜色list
      detailList: {}, //详情页所有数据
      plantype: 0, //0个人1公司

      collection: false, //是否收藏
    };
  },
  created() {
    // this.perminous = this.$store.state.user.userInfo.permious
  },
  watch: {
    xedColorList(list) {
      this.xedColorListS = list;
      list.forEach((item) => {
        this.wgColorList.push(item.outerColour); //外观颜色
        this.nsColorList.push(item.inColour); //内试颜色
      });
      this.wgColorList.forEach((item) => {
        item.chekd = false;
      });
      this.nsColorList.forEach((item) => {
        item.chekd = false;
      });
    },
    carllist(val) {
      this.imgs = val.car_ImageList[0].image;
      this.shoplist = val.storeDetails;
      this.detailList = val;
      this.collection = val.collection;
    },
  },
  methods: {
    scroll: function (e) {
      this.old.scrollTop = e.detail.scrollTop;
    },
    danbaoclick() {
      uni.navigateTo({
        url: "/pages_order/securedTransactions/securedTransactions?page=index",
      });
    },
    goucheclick() {
      this.detailBox = true;
    },
    //个人公司
    indeivclick(type) {
      if (type === 0) {
        this.plantype = 0;
      } else {
        this.plantype = 1;
      }
    },
    // 确认购车
    async AddOrder() {
      if (this.clorList.outerColour.color === "") {
        uni.showToast({
          title: "请选择外观颜色",
          duration: 3000,
          icon: "none",
        });
        return false;
      }
      if (this.clorList.inColour.color === "") {
        uni.showToast({
          title: "请选择内饰颜色",
          duration: 3000,
          icon: "none",
        });
        return false;
      }
      var color = JSON.stringify(this.clorList);
      try {
        const res = await this.$api.commodity.AddOrder({
          car_Id: this.detailList.id, //车辆Id
          store_Id: this.shoplist.store_Id, //店铺Id
          configuration_Id: Number(this.detailList.carid), //配置Id
          colour: color, //颜色
          down_Payment_Rate: this.billinumber, //首付比率
          installment: this.fenqishu, //分期数
          down_Payment_Money: indebilie, //首付金额
          finance_Plan_Type: this.plantype, //金融方案类型 0：个人方案，1：公司方案
          installment_Monthly_Money: mousbilie, //月供
          factory_Money: numArr, //厂商指导价，单位;元
        });
        if (res.code === 200) {
          uni.navigateTo({
            url:
              "/pages_commodity/idCarsAuthentication/idCarsAuthentication?typeid=" +
              res.data,
          });
        }
      } catch (err) {}
    },
    //关闭弹框
    gbdetaclick() {
      this.detailBox = false;
    },
    //外观颜色
    wgcolorClick(item, index) {
      let listbox = []; //暂存赋值
      this.wgColorList.forEach((item, i) => {
        if (i === index) {
          if (item.chekd === false) {
            item.chekd = true;
          } else {
          }
        } else {
          item.chekd = false;
        }
        listbox.push(item);
      });
      this.wgColorList = listbox;
      this.clorList.outerColour = item;
    },
    //内饰颜色
    nsColorClick(item, index) {
      let listbox = []; //暂存赋值
      this.nsColorList.forEach((item, i) => {
        if (i === index) {
          if (item.chekd === false) {
            item.chekd = true;
          } else {
          }
        } else {
          item.chekd = false;
        }
        listbox.push(item);
      });
      this.nsColorList = listbox;
      this.clorList.inColour = item;
    },
    //预约到店
    reservationShop(types) {
      let name = this.carllist.car_Type_Name + this.carllist.configuration_Name;
      uni.navigateTo({
        url:
          "/pages_commodity/reservationShop/reservationShop?stopid=" +
          types.store_Id +
          "&carid=" +
          this.carllist.carid +
          "&sAmount=" +
          types.service_Amount +
          "&colorList=" +
          encodeURIComponent(JSON.stringify(this.xedColorList)) +
          "&typdei=110" +
          "&namecar=" +
          name,
      });
    },
    // 跳转店铺
    stortClick(type) {
      uni.navigateTo({
        url: "/pages_store/newCarStore/index/index?storeid=" + type.store_Id,
      });
    },
    //是否收藏
    collectclick() {
      this.collection = !this.collection;
      if (this.collection) {
        this.addFavorite();
      } else {
        this.cancelFavorite();
      }
    },
    //关注
    async addFavorite() {
      try {
        const res = await this.$api.store.addFavorite({
          favorite_type: 2, //收藏类型 2、新车 3、保养店铺 4、车辆店铺
          newcar_id: this.detailList.id, //新车id
        });
        this.perList = res.data;
        this.perList.province = res.data.location;
      } catch (err) {}
    },
    //取消关注
    async cancelFavorite() {
      try {
        const res = await this.$api.store.cancelFavorite({
          newcar_id: this.detailList.id, //新车id
        });
        this.perList = res.data;
        this.perList.province = res.data.location;
      } catch (err) {}
    },
    kefu() {
      uni.makePhoneCall({
        phoneNumber: this.$store.state.serviceNumber.number,
      });
    },
    // 点击导航
    onClickNavigation() {
      uni.openLocation({
        latitude: this.shoplist.lat,
        longitude: this.shoplist.lon,
      });
    },
    mobile() {
      uni.makePhoneCall({
        phoneNumber: this.shoplist.phone, //仅为示例
      });
    },
  },
};
</script>

<style>
/* 车源详情弹框 */
.detiboxs {
}

.deheads {
  padding: 32rpx;
}

.deimg {
  background-color: #000000;
  width: 210rpx;
  height: 140rpx;
  border-radius: 5rpx;
}

.deimg image {
  width: 210rpx;
  height: 140rpx;
  border-radius: 5rpx;
}

.detitles {
  padding: 0rpx 20rpx;
}

.dethead {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}

.debottom {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin-top: 30rpx;
}

.debottom text {
  text-decoration: line-through;
}

.contents {
}

.xiantiao {
  border-bottom: 1px solid #f6f6f6;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0rpx 30rpx;
  text-align: center;
}

.xtnames {
  padding: 0rpx 20rpx;
}

.ppjiantougo {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}

.ppjiantou {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}

.xfborder {
  width: 32rpx;
  height: 4rpx;
  background: #fbd220;
  border-radius: 2rpx;
  margin-left: 15rpx;
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
  padding: 0rpx 0rpx 0rpx 48rpx;
}

.scroll-view-item {
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}

.scroll-view-item_H {
  display: inline-block;
  width: 120rpx;
  height: 54rpx;
  border: 2rpx solid #d1d1d1;
  border-radius: 5rpx;
  margin-right: 24rpx;
  text-align: center;
  line-height: 54rpx;
}

.scroll-view-item_Hs {
  display: inline-block;
  width: 120rpx;
  height: 54rpx;
  border: 2rpx solid #fbd220;
  border-radius: 5rx;
  margin-right: 24rpx;
  text-align: center;
  line-height: 54rpx;
}

.fusonicon {
  text-align: center;
  line-height: 29rpx;
  width: 0;
  height: 0;
  border-top: 30rpx solid #fbd220;
  border-left: 30rpx solid transparent;
  margin-top: -56rpx;
  margin-bottom: 36rpx;
  margin-left: 90rpx;
}

.fuicon {
  position: absolute;
  margin-top: -26rpx;
  margin-left: -16rpx;
}

.programme {
  padding: 20rpx 30rpx;

  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}

.hkuai {
  width: 8rpx;
  height: 24rpx;
  background: #fbd220;
  border-radius: 4rpx;
  margin-right: 10rpx;
}

.relebox {
  width: 730rpx;
  height: 440rpx;
}

.rel {
  float: left;
  width: 33.3%;
  height: 250rpx;
  transition: all 0.8s;
}

.relmobile {
  float: left;
  width: 33.3%;
  height: 250rpx;
  position: absolute;
  top: 1080rpx;
  transition: all 0.8s;
}

.reimg {
}

.rename {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  margin-top: 10rpx;
  margin-bottom: 100rpx;
}

.tuichu {
  display: flex;
  justify-content: center;
  width: 750rpx;
}

.tuicimg {
  width: 62rpx;
  height: 62rpx;
}

.individualScheme {
  padding: 0rpx 30rpx;

  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}

.fangfansm {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}

.shoufubox {
  padding: 10rpx 30rpx 30rpx 0rpx;
}

.shoufubiank {
  width: 690rpx;
  height: 152rpx;
  background: #ffffff;
  box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
  border-radius: 10rpx;
}

.bianbox {
  width: 229rpx;
  border-right: 1px solid #eeeeee;
  text-align: center;
}

.bianboxs {
  width: 229rpx;
  text-align: center;
}

.money {
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #fbb000;
}

.tostore {
  padding: 40rpx 30rpx;
}

.titles {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}

.address {
  margin-top: 20rpx;
  line-height: 42rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}

.yuyuaestop {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}

.yifuwu {
}

.iconsss {
  width: 40rpx;
  height: 40rpx;
  background: linear-gradient(0deg, #fbd220, #ffe23e);
  border-radius: 50%;
  text-align: center;
  line-height: 40rpx;
  margin-right: 18rpx;
}

.iconobj {
  /* margin-left: 14rpx; */
}

.yuyedaod {
  text-align: center;
  line-height: 60rpx;
  width: 176rpx;
  height: 60rpx;
  background: linear-gradient(0deg, #fbd220, #ffe23e);
  border-radius: 30rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #3d3d3d;
}

.images {
  width: 100%;
}

.images image {
  width: 100%;
}

.quedingbtncolor {
  width: 750rpx;
  height: 121rpx;
  background: #ffffff;
  position: fixed;
  bottom: 0;
  padding: 20rpx 30rpx;
  z-index: 999;
}

.ixonboxs {
  text-align: center;
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}

.iconsss {
}

.kanches {
  width: 166rpx;
  height: 88rpx;
  background: #3d3d3d;
  border-radius: 44rpx 0px 0px 44rpx;

  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #fbd220;
  padding: 14rpx;
}

.gouche {
  width: 316rpx;
  height: 88rpx;
  background: linear-gradient(0deg, #fbd220, #ffe23e);
  border-radius: 44rpx;
  font-size: 24rpx;
  color: #3d3d3d;
  line-height: 88rpx;
}

.colorsboxs {
  padding: 20rpx 30rpx;
}

.colotext {
  width: 100rpx;
}

.colorlists {
}

.clrboxxzhong {
  width: 170rpx;
  height: 60rpx;
  background: #ffe23e;
  border-radius: 10rpx;
  margin-left: 15rpx;
  margin-bottom: 15rpx;
}

.clrbox {
  width: 170rpx;
  height: 60rpx;
  background: #eeeeee;
  border-radius: 10rpx;
  margin-left: 15rpx;
  margin-bottom: 15rpx;
}

.whitess {
  width: 31rpx;
  height: 31rpx;
  border-radius: 50%;
  border: 1px solid;
  margin-right: 12rpx;
}

.colorname {
  width: 60px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.kuangdoubu {
  border: 1px solid;
  width: 31rpx;
  height: 31rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12rpx;
}

.white4 {
  width: 31rpx;
  height: 16rpx;
  background: rgba(251, 172, 113, 1);
}

.btnbox {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(0deg, #fbd220, #ffe23e);
  text-align: center;
  line-height: 88rpx;
  position: fixed;
  bottom: 0;
}

.btnboxhs {
  width: 100%;
  height: 88rpx;
  background: #d0cfcf;
  text-align: center;
  line-height: 88rpx;
  position: fixed;
  bottom: 0;
}
</style>
